<template>
  <h3>fetch 请求</h3>
  <div>
    <f-button @click="handleStart()">开始</f-button>
  </div>
  <div class="h400">
    {{ fetchResult }}
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { http } from "../../packages/utils";

const fetchResult = ref();

const handleStart = () => {
  fetchResult.value = null;

  const url = '/base/institutions/queryBranch';
  const queryData = {
    "name": "",
    "institutionId": "1746703246613555555"
  }

  const controller = ref();

  const h = http.post<[IResult]>(url, http.adornData(queryData, {
    openCancelDuplicate: true,
    cancelTokenSource: (s: any) => controller.value = s
  }))
  // const h = http.post<[IResult]>(url, queryData)
  h?.then(res => {
    console.log('res', res);
    fetchResult.value = res?.data
  });

  console.log('cancelRequest1', controller);
  // http.cancelRequest(controller);
  // controller.abort()

  setTimeout(() => {
    console.log('cancelRequest2', controller);
    http.cancelRequest(controller.value);
  }, 1000 * 1.5);
};

interface IResult {
  id: number | string; // ID
  usageId: string; // 分院编码
  usageName: string; // 分院名称
}

</script>

<style lang="scss"></style>
